<template>
  <div class="video-main">
    <div class="common-content">
      <img class="xcsp" src="/images/xcsp.png">
      <k-tabs @change="changeTabs" :list="tabsList"></k-tabs>
      <div class="video-list">
        <div class="video-box">
          <div @click="openVideoModal($TOOL.filterUrl(firstVideo.url),firstVideo.title)" class="first-video">
            <div class="cover">
              <img :src="$TOOL.filterUrl(firstVideo.imgUrl)">
            </div>
            <h1 class="title line-1">{{firstVideo.title}}</h1>
            <div class="video-icon"></div>
          </div>

            <p class="w-full more-text" >
              <router-link to="/videoList">
              更多>>
              </router-link>
            </p>

        </div>
        <ul class="other-video">
          <li class="item" @click="openVideoModal($TOOL.filterUrl(item.url),item.title)"  v-for="item in otherVideo" :key="item.title">
            <a  >
              <div class="cover">
                <img :src="$TOOL.filterUrl(item.imgUrl)"></img>
              </div>
              <p class="title line-2">{{item.title}}</p>
            </a>
            <div style="--size:40px;--bootom: 50px" class="video-icon"></div>
          </li>
        </ul>
      </div>
    </div>
    <video-popup v-if="showVideoModal" @closed="showVideoModal=false" :src="videoSrc" :title="videoTitle"></video-popup>
  </div>
</template>

<script setup>
import {ref,computed} from 'vue'
import KTabs from "@/components/k-tabs.vue";
import {homeApi} from "@/api";
import tool from "@/utils/tool";
import VideoPopup from "@/components/video-popup/video-popup.vue";

const tabsList = [
  {
    name: "媒体视频",
    code: "type1"
  },
  {
    name: "科普视频",
    code: "type2"
  }
];
const videoList=ref([
])
const showVideoModal=ref(false)
const videoSrc=ref('')
const videoTitle=ref('')
const currentIndex=ref(0)

function openVideoModal(url,title){
  videoSrc.value=''
  showVideoModal.value=true
  videoSrc.value=url||''
  videoTitle.value=title
}
function changeTabs(index){
  currentIndex.value=index
  const code=tabsList[currentIndex.value].code
  videoList.value=resultList.value[code]||[]
}
const firstVideo=computed(()=>{
  return videoList.value?.length?videoList.value[0]:[]
})
const otherVideo=computed(()=>{
  if(!videoList.value||videoList.value?.length===1) return  []
  return videoList.value.slice(1,videoList.value.length)
})
const resultList=ref({})
onMounted(loadData)
async function loadData(){
  const res=await homeApi.videoViewInfo.get()
  resultList.value=res||{}
  videoList.value=res['type1']
  console.log(videoList.value)
}
</script>

<style scoped lang="scss">
.video-main {
  padding: 32px 40px;

  .xcsp {
    width: 100%;
    margin-bottom: 32px;
  }
  .video-icon{
    --size: 60px;
    --bootom: 60px;
    width: var(--size);
    height: var(--size);
    background-color: rgba(0, 0, 0, 0.65);
    position: absolute;
    right: 15px;
    bottom: var(--bootom);
    border-radius: 50%;
    z-index: 2;
    &:before{
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-left: 15px solid #fff;
      border-bottom: 10px solid transparent;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-48%, -50%);
    }
  }
  .video-list{
    display: flex;
    margin-top: 32px;
    align-items: flex-start;
  }
  .video-box{
    width: 54%;
    .more-text{
      font-size: 16px;
      margin-top: 16px;
      text-align: right;
    }
  }
  .first-video{
    cursor: pointer;
    display: block;
    width: 100%;
    position: relative;
    &:before{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
      background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
      background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
      padding-bottom: calc(260% / 11);
      z-index: 2;
    }
    &:hover{
      .cover{
        img{
          transform: scale(1.05);
        }
      }
    }
    .title{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      color: #fff;
      font-weight: bold;
      padding: 0 40px 40px;
      font-size:24px;
      z-index: 2;
    }
    .cover{
      overflow: hidden;
      width: 100%;
      img{
        object-fit: cover;
        aspect-ratio: 16 / 9;
        display: block;
        transition: all 0.3s ease-out;
        width: 100%;
      }
    }
  }
  .other-video{
    cursor: pointer;
    margin-left: 32px;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item{
      width: 48%;
      margin-bottom: 32px;
      position: relative;

      &:hover{
        .cover{
          img{
            transform: scale(1.05);
          }
        }
      }
      a{
        display: block;
        width: 100%;
        .cover{
          overflow: hidden;
          width: 100%;
          img{
            object-fit: cover;
            display: block;
            transition: all 0.3s ease-out;
            width: 100%;
            aspect-ratio: 16 / 9;
          }
        }
        .title{
          font-size: 16px;
          margin-top: 16px;
        }
      }
    }
  }
}
</style>
